<template>
  <view class="viewport">
    <fui-nav-bar background="#0052D9" title="设备" color="#fff"></fui-nav-bar>
    <view class="warp">
      <view class="port">
        <view class="port_A">
          <fui-section title="代办任务" isLine></fui-section>
          <view class="ul">
            <view class="port_item">
              <view class="port_count">12</view>
              <view class="port_content">正常运行</view>
            </view>
            <view class="port_item">
              <view style="color: red" class="port_count">2</view>
              <view style="color: red" class="port_content">故障</view>
            </view>
            <view class="port_item">
              <view class="port_count">12</view>
              <view class="port_content">待审核</view>
            </view>
            <view class="port_item">
              <view class="port_count">12</view>
              <view class="port_content">待审核</view>
            </view>
          </view>
        </view>

        <view class="footer">
          <fui-list>
            <fui-list-cell arrow>
              <view class="fui-align__center">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>设备档案</text>
              </view>
              <text class="fui-text__explain">设备总数30台</text>
            </fui-list-cell>
            <fui-list-cell arrow>
              <view class="fui-align__center" @click="stock">
                <image class="fui-list__icon" src="/static/images/institution/userName.png" mode="widthFix"></image>
                <text>设备盘点</text>
              </view>
            </fui-list-cell>
          </fui-list>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const stock = () => {
  uni.navigateTo({
    url: '/subpkg_equipmentInventory/equipmentInventory/index'
  });
};
</script>

<style lang="scss" scoped>
page {
  height: 100vh;
  background-color: pink;
}
.viewport {
}
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;

  .port {
    padding: 18rpx;
    .port_A {
      background-color: #fff;
      padding: 16rpx;
      border-radius: 10rpx;
      margin-bottom: 18rpx;
      .ul {
        display: flex;
        justify-content: space-between;
        padding: 0 24rpx;
        margin-top: 24rpx;
        .port_item {
          width: 130rpx;
          height: 90rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .port_content {
            font-size: 24rpx;
            color: #aaa;
          }
        }
      }
    }

    .content_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      padding: 0 60rpx;
      margin: 30rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 140rpx;
        width: 120rpx;
      }
      .image {
        height: 48rpx;
        width: 48rpx;
      }
      .content_title {
        font-size: 25rpx;
      }
    }
  }
  .footer {
    .fui-align__center {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .fui-text__explain {
      color: #ccc;
    }

    .fui-list__icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }
  }
}
</style>
